<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>布局小技巧1</title>
</head>
<body>
<!--
行内元素,行内块元素可以被父元素当成文本处理:即可以像文本一样去处理:行内,行内块在父元素中的对齐
例如:text-align,line-height,text-indent(缩进)等


如何让子元素在父亲元素水平居中:
  若子元素为块元素:给子元素加上:margin: auto-->
<div style="text-align: center;background-color: red">
 <img src="../CSS盒子模型/盒子模型.png" alt="" style="display: block;margin: 0 auto">
</div>
<hr>
<!--若子元素为行内元素,行内块元素,给父元素加上text-align:center-->
<div style="text-align: center;background-color: yellow">
  <span style="background-color: red;width: 500px" >你好</span>
</div>
<hr>


<!--
如何让子元素垂直居中:
若元素为块元素,给子元素加上:margin-top的值为:(父元素content-子元素盒子的总高)/2
-->
<div style="height: 800px;background-color: green;text-align: center">
    <img src="../CSS盒子模型/盒子模型.png" alt="" style="height: 500px;margin-top: 150px">

</div>

<!--若子元素为行内元素,行内块元素:让父元素的height=line-height,每个子元素都加上vertical-align:middle
-->
<hr>
<div style="background-color: greenyellow;height: 400px;line-height: 400px;text-align: center">
你好<span style="vertical-align: middle">我是span</span>
</div>
</body>
</html>